<template>
  <div class="myFriend">
    <div style="background: #fff">
      <u-tabs
        :list="list2"
        itemStyle="width: 33%; height: 34px;"
        lineWidth="66"
        activeStyle="color:#3c9cff;"
        inactiveStyle="color:#9b9c9f;"
        @change="changeTabs"
        :current="0"
      ></u-tabs>
    </div>
    <div class="content">
      <!-- 好友列表 -->
      <div class="studentsPage" v-show="current == 0 ? true : false">
        <div class="model2">
          <div class="top">
            <div class="top_title">
              <div class="name" style="font-weight: 600">童学</div>
              <div
                class="deilte"
                style="display: flex; align-items: center"
                @click="goStudentDetails"
              >
                <span style="margin-right: 1px; font-size: 13px; color: #9153dd"
                  >查看详细</span
                >
                <u-icon name="arrow-right" color="#9153dd" size="14"></u-icon>
              </div>
            </div>
            <div class="list">- 1982都高初中部21班</div>
            <div class="list">- 1982都高初中部21班</div>
            <div class="list">- 1982都高初中部21班</div>
          </div>
          <div class="bottom">
            <button
              type="primary"
              style="
                background: #1684fc;
                width: 80px;
                line-height: 40px;
                height: 40px;
                margin-right: 0;
              "
            >
              删除
            </button>
          </div>
        </div>
      </div>
      <!-- 我的申请 -->
      <div class="searchPage" v-show="current == 1 ? true : false">
        <u-empty
          mode="data"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
          text="暂无申请"
        ></u-empty>
      </div>
      <!-- 申请加我 -->
      <div class="searchPage" v-show="current == 2 ? true : false">
        <u-empty
          mode="data"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
          text="暂无申请"
        >
        </u-empty>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //头部切换
      list2: [{ name: "好友列表" }, { name: "我的申请" }, { name: "申请加我" }],
      current: 0,
    };
  },
  methods: {
    //头部切换
    changeTabs(item) {
      console.log(item);
      this.current = item.index;
    },
    //查看详细信息
    goStudentDetails() {
      uni.navigateTo({
        url: "/pages/findAlumni/studentDetails",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  margin-top: 10px;
  /* 同学 */
  .studentsPage {
    .model2 {
      background: white;
      margin-bottom: 10px;
      .top {
        padding: 15px 15px;
        border-bottom: 1px solid #f3f3f3;
        .top_title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
        }
        .list {
          line-height: 26px;
          /* color: #756c88; */
        }
      }

      .bottom {
        padding: 15px 15px;
      }
    }
  }
}
</style>